<template>
  <div class="home">
    <div class="box">
        <h3 class="zt">推荐专题</h3>
        <div class="lists">
            <div @click="ztbtn(x.id)" class="list" v-for="x,i in themes" :key="i">
                <p class="title">{{ x.title }}</p> 
                <span class="tit">{{ x.themeDescribe }}</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
data(){
        return{
            themes:[]
        }
    },
    created(){
        this.fb()
    },
    methods:{
        fb(){
           this.$http.get('/api/solutionSubject/theme.do?_dataType=json&_dataClientType=3&client_type=40&solutionSubjectId=1&pageNum=1&pageSize=6&templatePageSize=6&type=3&device=2&business_type=1%2C2%2C3').then(res=>{
            this.themes=res.data.body.data.themes
            console.log(res.data.body.data.themes);
           })
        },
        ztbtn(x){
            this.$router.push({
                path:'/zt',
                query:{
                    id:x
                }
            })
        }
    }
}
</script>

<style scoped>
    .home{
        margin-left: 0.24rem;
    }
    .zt{
        height: .32rem;
        line-height: .32rem;
        font-size: 0.36rem;
        margin-top: .6rem;
        margin-bottom: .4rem;
    }
    .lists{
        height: 1.86rem;
        box-sizing: border-box;
        padding-top: .32rem;
        white-space: nowrap;
        overflow: scroll;
    }
    .lists::-webkit-scrollbar {
        display: none;
      }
    .list{
        box-sizing: border-box;
        width: 2.4rem;
        font-size: 0.3rem;
        font-weight: bold;
        display: inline-block;
        padding-left: .32rem;
        vertical-align: top;
        height: 1.3rem;
        box-shadow: .02rem .06rem .2rem .04rem rgb(20 38 86 / 10%);
        margin-left: 0.24rem;
    }
    .title{
        margin-top: .32rem;
    }
    .tit{
        color: rgba(0,0,0,.6);
        font-size:.26rem;
        display: inline-block;
        margin-top: .08rem;
    }
</style>